<template>
	<view>
		<view class="content" v-for="(item,index) in Dliary">
		<template>
			<view class="content_left">
				<view class="content_left_top">{{item.time}}<text>{{item.weather}}</text></view>
				<view class="content_left_bottom">{{item.message}}</view>
			</view>
			<view class="content_right">
				<image src="https://iconfont.alicdn.com/s/0c64ef49-8681-4c97-bec3-604a61875adb_origin.svg" mode="widthFix">
				</image>
			</view>
		</template>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		name: "messageCard",
		computed:{
			...mapState(['Dliary'])
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="less">
	.content {
		width: 90%;
		height: 200rpx;
		display: flex;
		justify-content: row;
		margin: 30rpx auto;
		border-radius: 20rpx;
		box-shadow: 5rpx 10rpx 10rpx 10rpx #eee;

		.content_left {
			flex: 4;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding-left: 20rpx;
			font-size: 28rpx;
			font-weight: 500;

			.content_left_top {
				text {
					margin-left: 50rpx;

				}
			}

			.content_left_bottom {
				font-size: 28rpx;
				font-weight: 600;
				// 超出两行换行 以下都是
				text-overflow: -o-ellipsis-lastline;
				  overflow: hidden;
				  text-overflow: ellipsis;
				  display: -webkit-box;
				  -webkit-line-clamp: 2;
				  line-clamp: 2;
				  -webkit-box-orient: vertical;
			}
		}

		.content_right {
			flex: 2;
			border-radius: 0 20rpx 20rpx 0;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;

			}
		}
	}
</style>
